<script setup lang="ts">
import layoutBg from "@/components/layoutBg/index.vue";
import huntingBg from "@/assets/images/page-bg.webp";
</script>

<template>
	<div>
		<layoutBg :img-bg="huntingBg">
			<div class="hidden md:block">
				<div class="text-center text-[49px] font-semibold text-white">EXPERIENCE</div>
				<div class="flex justify-between items-start w-full mb-5">
					<div class="px-5 py-3 text-content-bg text-white leading-[26px] text-[15px]" style="width: 45%">
						<span class="font-semibold">What Sets Us Apart</span><br />
						Outdoor Expertise: Specialized knowledge in hunting and camping equipment, including climbing sticks, shooting pods,
						and ground blinds.
						<br />
						Advanced Manufacturing Capabilities:
						<br />
						Cutting-edge equipment for fabric and hard goods production.
						<br />
						Unique processes like camo printing, water transfer dipping, and custom anodized finishes.
						<br />
						Global Reach, Local Precision: Efficient operations in China and Southeast Asia enable competitive production and
						reliable delivery worldwide. <br />
						Sustainability Focus: Eco-friendly materials and efficient production processes to minimize environmental impact.
						<br />
						<span class="font-semibold">Our Achievements </span><br />
						• Delivered durable climbing sticks and shooting pods for hunting enthusiasts.<br />
						• Designed and manufactured innovative blinds for outdoor comfort and stealth.<br />
						• Earned long-term partnerships with industry-leading brands.
					</div>
					<div class="px-5 py-3 text-content-bg text-white leading-[26px] text-[15px]" style="width: 45%">
						Trusted by Industry Leaders <br />
						Citech is proud to partner with some of the most recognized names in the outdoor industry:<br />
						<div class="grid grid-cols-3 gap-3">
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_1.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_2.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_3.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_4.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_5.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_6.png" alt="" />
							<img style="width: 100%" class="bg-white" src="../../assets/images/exp_7.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="md:hidden">
				<div class="text-center text-[32px] font-semibold text-white">EXPERIENCE</div>
				<div class="my-5 p-5 text-content-bg text-white leading-7 text-[18px]">
					<span class="font-semibold">What Sets Us Apart</span><br />
					Outdoor Expertise: Specialized knowledge in hunting and camping equipment, including climbing sticks, shooting pods, and
					ground blinds.
					<br />
					Advanced Manufacturing Capabilities:
					<br />
					Cutting-edge equipment for fabric and hard goods production.
					<br />
					Unique processes like camo printing, water transfer dipping, and custom anodized finishes.
					<br />
					Global Reach, Local Precision: Efficient operations in China and Southeast Asia enable competitive production and
					reliable delivery worldwide. <br />
					Sustainability Focus: Eco-friendly materials and efficient production processes to minimize environmental impact.
					<br />
					<span class="font-semibold">Our Achievements </span><br />
					• Delivered durable climbing sticks and shooting pods for hunting enthusiasts.<br />
					• Designed and manufactured innovative blinds for outdoor comfort and stealth.<br />
					• Earned long-term partnerships with industry-leading brands.
				</div>
				<div class="my-5 p-5 text-content-bg text-white leading-7 text-[18px]">
					Trusted by Industry Leaders <br />
					Citech is proud to partner with some of the most recognized names in the outdoor industry:<br />
					<div class="grid grid-cols-3 gap-3">
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_1.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_2.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_3.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_4.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_5.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_6.png" alt="" />
						<img style="width: 100%" class="bg-white" src="../../assets/images/exp_7.png" alt="" />
					</div>
				</div>
			</div>
		</layoutBg>
	</div>
</template>

<style lang="scss" scoped>
.text-content-bg {
	background-color: rgba(0, 0, 0, 0.65);
	// width: 45%;
}
</style>
